<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Flip Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        /* CSS styles */
        /* Example by Ruud Burger at https://codepen.io/RuudBurger/pen/bwjry */
        @import url(http://fonts.googleapis.com/css?family=Open+Sans);

        body {
            background: linear-gradient(to  right, #0066ff 0%, #ff33cc 100%);
            font-family: Open Sans;
            font-size: 50px;
            color: #222;
        }
        body:hover{
            background: linear-gradient(to  right, #8288f5 0%, #f868b7 100%);
        }
        .front:hover{
            background: linear-gradient(to bottom right, #0066ff 0%, #ff33cc 100%);
        }
      

        label {
            -webkit-perspective: 1000px;
            perspective: 1000px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            display: block;
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            cursor: pointer;
        }

        .card {
            position: relative;
            height: 100%;
            width: 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transition: all 600ms;
            transition: all 600ms;
            z-index: 20;
        }

        .card div {
            position: absolute;
            height: 100%;
            width: 100%;
            background: #FFF;
            text-align: center;
            line-height: 200px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 2px;
        }

        .card .back {
            background: #222;
            color: #FFF;
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

        label:hover .card {
            -webkit-transform: rotateX(20deg);
            transform: rotateX(20deg);
            box-shadow: 0 20px 20px rgba(50,50,50,.2);
        }

        input {
            display: none;
        }

        :checked + .card {
            transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
        }

        label:hover :checked + .card {
            transform: rotateX(160deg);
            -webkit-transform: rotateX(160deg);
            box-shadow: 0 20px 20px rgba(255,255,255,.2);
        }
        </style>

    </head>
    <body>
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <!-- Label -->
        <label>
            <input type="checkbox"  />
            <div class="card">
                <div class="front">Front</div>
                <div class="back">Back</div>
            </div>
        </label>
    </body>
</html>
